<% layout('/layouts/default.html', {title: 'tk_task管理', libs: ['validate','dataGrid','fileupload']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-note"></i> ${text(tkTask.isNewRecord ? '新增tk_task' : '编辑tk_task')}
			</div>
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<#form:form id="inputForm" model="${tkTask}" action="${ctx}/tk/tkTask/savePtTask" method="post" class="form-horizontal">
			<div class="box-body">
				<div class="form-unit">${text('基本信息')}</div>
				<#form:hidden path="id"/>
				<#form:hidden path="taskStatus" defaultValue="1" />
				<#form:hidden path="userId" defaultValue="0" />
				<#form:hidden path="buzhouList" defaultValue=""/>
				<#form:hidden path="type" defaultValue="3"/>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('项目名称/APP名称')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="projectName" maxlength="255" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('类型')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="taskType" dictType="tk_type" blankOption="true" blankOptionLabel="请选择" class="form-control required"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('标题')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="title" maxlength="255" class="form-control required"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('描述')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:textarea path="explainStr" rows="3" maxlength="255" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('提交时常')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="submitTimes" defaultValue="1小时" dictType="task_shichang" blankOption="true" blankOptionLabel="请选择" maxlength="10" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('审核时常')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="examineTimes" defaultValue="1小时" dictType="task_shichang" blankOption="true" blankOptionLabel="请选择" maxlength="10" class="form-control required"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('设备类型')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:radio path="devType" defaultValue="0" dictType="task_dev_type" class="form-control digits required" />
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('做单方式')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="zuodanNumType" defaultValue="2" dictType="task_num_type" blankOption="true" blankOptionLabel="请选择" class="form-control digits required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('做单限制(单/人)')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="zuodanNum"  class="form-control digits "/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('悬赏单价（元）')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="price" maxlength="8" class="form-control number required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('悬赏名额（单）')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="yuDoNum" class="form-control digits required"/>
							</div>
						</div>
					</div>
				</div>
			</div>
<!--			<div class="box-footer">-->
<!--				<div class="row">-->
<!--					<div class="col-sm-offset-2 col-sm-10">-->
<!--						<% if (hasPermi('tk:tkTask:edit')){ %>-->
<!--							<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;-->
<!--						<% } %>-->
<!--						<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
		</#form:form>

		<div class="box-body">
			<div class="form-unit">${text('步骤')}</div>
			<a href="javascript:;" onclick="wangzhi('wangzhi')"  class="btn btn-default" title="${text('新增')}">${text('网址')}</a>
			<a href="javascript:;" onclick="erweima('erweima')"  class="btn btn-default" title="${text('新增')}">${text('二维码')}</a>
			<a href="javascript:;" onclick="erweima('tuwen')"  class="btn btn-default" title="${text('新增')}">${text('图文说明')}</a>
			<a href="javascript:;" onclick="wangzhi('wenzi')"  class="btn btn-default" title="${text('新增')}">${text('文字说明')}</a>
			<a href="javascript:;" onclick="wangzhi('shuju')"  class="btn btn-default" title="${text('新增')}">${text('复制数据')}</a>
			<a href="javascript:;" onclick="erweima('jietu')"  class="btn btn-default" title="${text('新增')}">${text('收集截图')}</a>
			<a href="javascript:;" onclick="wangzhi('shouji')"  class="btn btn-default" title="${text('新增')}">${text('收集信息')}</a>
			<div style="margin-top: 10px;">
				<table id="dataGrid"></table>
			</div>
		</div>

		<div class="box-footer">
			<div class="row">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" onclick="tijiao()" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
					<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
				</div>
			</div>
		</div>
	</div>
</div>
<% } %>
<script>
$("#inputForm").validate({
	submitHandler: function(form){
		$("#buzhouList").val(JSON.stringify(dataJSON));
		js.ajaxSubmitForm($(form), function(data){
			js.showMessage(data.message);
			if(data.result == Global.TRUE){
				js.closeCurrentTabPage(function(contentWindow){
					contentWindow.page();
				});
			}
		}, "json");
    }
});

function tijiao(){

	$("#inputForm").submit();
	// console.log(1000);
	// return;
	// js.ajaxSubmitForm($("inputForm"), function(data){
	// 	js.showMessage(data.message);
	// 	if(data.result == Global.TRUE){
	// 		js.closeCurrentTabPage(function(contentWindow){
	// 			contentWindow.page();
	// 		});
	// 	}
	// }, "json");
}
</script>
<script>
	var buzhouStr = `${tkTask.buzhouList}`;
	var dataJSON = [];
	if(buzhouStr && buzhouStr != ''){
		dataJSON = JSON.parse(buzhouStr);
	}

	var types = {"wangzhi":"输入网址","erweima":"传二维码","tuwen":"图文说明","wenzi":"文字说明","shuju":"复制数据（如邀请码）","jietu":"收集截图","shouji":"收集信息"};

	$('#dataGrid').dataGrid({
		shrinkToFit: false,
		data:dataJSON,
		datatype: "local",
		autoGridHeight:function () {
			return "100%";
		},
		columnModel: [
			{header:'${text("步骤")}', name:'', index:'a.project_name', width:70, align:"center", formatter: function(val, obj, row, act){
				return "第"+obj.rowId+"步";
			}},
			{header:'${text("类型")}', name:'type', index:'a.project_name', width:70, align:"center", formatter: function(val, obj, row, act){
				return types[val];
			}},
			{header:'${text("说明")}', name:'shuoming', index:'a.title', width:100, align:"left"},
			{header:'${text("图片/链接/邀请码")}', name:'pic', index:'a.dev_type', width:150, align:"center", formatter: function(val, obj, row, act){
				if(row.type == "wangzhi" || row.type.indexOf("shuju")!=-1){
					return row.shuomingTwo;
				}
				return val && val!=''?'<img src="'+val+'" style="width: 50px" onclick="tanPic(\''+val+'\')" /> ':"";
			}},
			{header:'${text("操作")}', name:'actions', width:150, formatter: function(val, obj, row, act){
				var actions = [];
				actions.push('<a href="javascript:;" onclick="edit('+obj.irow+')" class="" title="${text("编辑")}"><i class="fa fa-pencil"></i></a>&nbsp;');
				actions.push('<a href="javascript:;"  class="" onclick="del('+obj.irow+')" title="${text("删除")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
				if((obj.irow-1)!=0){
					actions.push('<a href="javascript:;"  class="" onclick="moveUp('+obj.irow+')" title="${text("上移")}">上移</a>&nbsp;');
				}
				if(obj.irow!=dataJSON.length){
					actions.push('<a href="javascript:;"  class="" onclick="moveDown('+obj.irow+')" title="${text("下移")}">下移</a>&nbsp;');
				}
				return actions.join('');
			}}
		],
		// 加载成功后执行事件
		ajaxSuccess: function(data){

		}
	});
</script>
<script id="wangzhi" type="text/template">
	<form id="wangzhiForm" action="${ctx}/tk/tkTask/save" method="post" enctype="multipart/form-data"
		  class="form-horizontal mt20 mb10" style="overflow:auto;max-height:300px;">
		<div class="row">
			<div class="col-sm-10">
				<div class="form-group">
					<label class="control-label col-sm-4" title="">
						<span class="required hide">*</span> ${text('说明')}：<i class="fa icon-question hide"></i></label>
					<div class="col-sm-8">
						<#form:textarea id="shuoming" name="shuoming" rows="4" placeholder="说明" maxlength="100"  class="form-control"/>
					</div>
				</div>
			</div>
			<div class="col-sm-10" id="twoShuomingDiv">
				<div class="form-group">
					<label class="control-label col-sm-4" title="">
						<span class="required hide">*</span> <span id="title"></span>：<i class="fa icon-question hide"></i></label>
					<div class="col-sm-8">
						<#form:textarea id="twoShuoming" name="twoShuoming" rows="4" placeholder="网址" maxlength="100"  class="form-control"/>
					</div>
				</div>
			</div>
		</div>
	</form>
</script>

<div id="erweima" style="display: none;">
	<form id="erweimaForm" action="${ctx}/tk/tkTask/fileUpload" method="post" enctype="multipart/form-data"
		  class="form-horizontal mt20 mb10" style="overflow:auto;height:600px;">
		<div class="row">
			<div class="col-sm-10">
				<div class="form-group">
					<label class="control-label col-sm-4" title="">
						<span class="required hide">*</span> ${text('说明')}：<i class="fa icon-question hide"></i></label>
					<div class="col-sm-8">
						<#form:textarea id="shuoming" name="shuoming" rows="4" placeholder="说明" maxlength="100"  class="form-control"/>
					</div>
				</div>
			</div>
			<div class="col-sm-10">
				<div class="form-group">
					<label class="control-label col-sm-4" title="">
						<span class="required hide">*</span> <span id="titlePic"></span>：<i class="fa icon-question hide"></i></label>
					<div class="col-sm-8">
						<img id="preview" style="width: 100px;height: 100px;display: none;" src="" alt="">
						<input id="erweimaFile" name="file" type="file" />
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

<script>



	var indexType = "";
	var imageInputUrl = "";

	function edit(index){
		index--;
		var row = dataJSON[index];
		var type = row.type;
		row.index = index;
		if(row.type=="wangzhi" || row.type=="wenzi"  || row.type=="shuju" || row.type=="shouji"){
			wangzhi(type,row);
		}else{
			erweima(type,row);
		}
	}

	//前移
	function moveUp( index) {
		index--;
		var objindex = dataJSON[index];
		var objindex1 = dataJSON[(index-1)];
		dataJSON[(index-1)] = objindex;
		dataJSON[(index)] = objindex1;
		$('#dataGrid').dataGrid('reloadGrid');
	}

	//后移
	function moveDown( index) {
		index--;
		var objindex = dataJSON[index];
		var objindex1 = dataJSON[(index+1)];
		dataJSON[(index+1)] = objindex;
		dataJSON[(index)] = objindex1;
		$('#dataGrid').dataGrid('reloadGrid');
	}

	//删除
	function del(i){
		dataJSON.splice(i-1, 1);
		$('#dataGrid').dataGrid('reloadGrid');
	}

	function wangzhi(type,row){
		js.layer.open({
			type: 1,
			area: ['600px'],
			title: types[type],
			resize: false,
			scrollbar: true,
			content: js.template('wangzhi'),
			success: function(layero, index){
				if(type=='wangzhi'){
					layero.find('#title').html("网址");
				}
				if(type=='wenzi'){
					layero.find('#twoShuomingDiv').hide();
				}
				if(type=='shuju' ){
					layero.find('#title').html("数据");
				}

				if(type=="shouji"){
					layero.find('#twoShuomingDiv').hide();
				}
				if(row){
					layero.find('#shuoming').val(row.shuoming);
					layero.find('#twoShuoming').val(row.shuomingTwo);
				}
			},
			btn: ['<i class="fa fa-check"></i> ${text("提交")}',
				'<i class="fa fa-close"></i> ${text("关闭")}'],
			btn1: function(index, layero){
				var arr = {
					shuoming:layero.find('#shuoming').val(),
					shuomingTwo:layero.find('#twoShuoming').val(),
					type:type
				};
				if(row){
					dataJSON[row.index] = arr;
				}else{
					dataJSON.push(arr)
				}

				js.layer.close(index);
				$('#dataGrid').dataGrid('reloadGrid');
				return false;
			},
		});
	}

	function erweima(type,row){
		layer.open({
			type: 1,
			area: ['600px'],
			title: types[type],
			resize: false,
			scrollbar: true,
			content: js.template('erweima'),
			success: function(layero, index){

				if(type=="jietu"){
					layero.find('#titlePic').html("截图");
				}

				if(type=="erweima"){
					layero.find('#titlePic').html("二维码");
				}

				if(type=="tuwen"){
					layero.find('#titlePic').html("图片");
				}

				if(row){
					layero.find('#shuoming').val(row.shuoming);
					layero.find('#preview').attr("src",row.pic);
					layero.find('#preview').show();
				}

				layero.find("#erweimaFile").change(function (){
					var fileInput = layero.find('#erweimaFile')[0]; // 获取文件输入元素
					if (fileInput.files.length > 0) {
						var file = fileInput.files[0]; // 获取选择的文件
						var formData = new FormData(); // 创建FormData对象
						formData.append('file', file); // 添加文件到FormData对象中
						$.ajax({
							url: '${ctx}/tk/tkTask/fileUpload', // 服务器端处理脚本的URL
							type: 'POST',
							data: formData,
							contentType: false, // 不要设置内容类型，因为FormData会自动设置
							processData: false, // 不要处理数据，因为FormData会自动处理
							success: function(response) {

								layero.find('#preview').attr("src",response.data);
								layero.find('#preview').show();
								// 处理响应数据
							},
							error: function(error) {
								console.log('Error uploading image');
								console.log(error);
							}
						});
					} else {
						console.log('No file selected');
					}
				})
			},
			btn: ['<i class="fa fa-check"></i> ${text("提交")}',
				'<i class="fa fa-close"></i> ${text("关闭")}'],
			btn1: function(index, layero){
				var arr = {
					shuoming:layero.find('#shuoming').val(),
					pic:layero.find('#preview').attr("src"),
					type:type
				};
				if(row){
					dataJSON[row.index] = arr;
				}else{
					dataJSON.push(arr)
				}
				layer.close(index);
				$('#dataGrid').dataGrid('reloadGrid');
				return false;
			},
		});
	}
</script>